<template>
	<view class="page-content">
		<card2 v-if="OBJDate != null" :title="'湿地面积分析'" class="m-card">
			<view class="m-card-content f-content">
				<view class="charts-box">
					<view class="flex charts-title">
						<!-- <view class="flex-item title"></view> -->
						<view class="unit">
							<text class="unitT">单位：</text>
							平方千米
						</view>
					</view>
					<view class="charts-box">
						<view class="charts"><l-echart canvas-id="canvasLineA" id="canvasLineA" ref="canvasLineA"></l-echart></view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="湿地生物多样性监测" v-if="wetlandBiology != null" class="m-card">
			<view class="m-card-content constant-a">
				<view v-for="(item, index) in wetlandBiology" :key="index" class="item-a">
					<view class="left">
						<image class="image" :src="item.ico" mode="aspectFill"></image>
						<view class="itemIn">
							<view class="top">{{ item.community }}</view>
							<view class="center">{{ item.plant }}</view>
						</view>
					</view>
					<view class="right">
						<view class="num">{{ item.area }}</view>
						<view class="unit">平方米</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="水质动态分析" v-if="waterQualityTrends != null" class="m-card">
			<view class="m-card-content r-content">
				<image class="img" src="@/static/mapMonitor/sz.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item" v-for="(item, index) in waterQualityTrends" :key="index">
						<view class="flex-item title">{{ item.project }}</view>
						<view class="value">
							<text>{{ item.data }} {{ item.unit == '/' ? '' : item.unit }}</text>
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="湿地盐碱化动态监测" v-if="salinizationOfWetland != null" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="@/static/mapMonitor/sd.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders">
						<view class="title">面积</view>
						<view class="value">
							<text>{{ salinizationOfWetland.area }}</text>
							亩
						</view>
					</view>
					<view class="item borders">
						<view class="title">占总面积比例</view>
						<view class="value">
							<text>{{ salinizationOfWetland.prop }}</text>
						</view>
					</view>
				</view>
				<view v-if="OBJDate != null" class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">近{{ OBJDate.sdyjhbbh.x.length }}年动态变化</view>
						<view class="unit">单位：亩</view>
					</view>
					<view class="charts"><l-echart canvas-id="canvasLineB" id="canvasLineB" ref="canvasLineB"></l-echart></view>
				</view>
			</view>
		</card2>
		<card2 title="湿地鸟类活动数量分析" v-if="birds != null" :pickerDate="birdsOption" :pickerDateIndex.sync="birdsOptionIndex" class="m-card">
			<view class="m-card-content f-content ">
				<image class="img" src="@/static/mapMonitor/nl.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders" v-for="(item, index) in birds" :key="index">
						<view class="title">{{ item.KEY }}</view>
						<view class="value">
							<text>{{ item.VALUE }}</text>
							{{ item.UNIT }}
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="湿地水体指标分析" class="m-card" v-if="WetlandEcology != null">
			<view class="m-card-content content-b">
				<scrollBar :tab="['蓝绿藻', '悬浮物', '透明度']" @change="scrollBarChange"></scrollBar>
				<image class="img" src="@/static/mapMonitor/sd.png" mode="widthFix"></image>
				<view class="WetlandFontWar">
					湿地总面积
					<text class="valueNUM">{{ WetlandEcology.list[WetlandEcologyIndex]['总'] }}</text>
					<text class="unit">km²</text>
				</view>
				<view class="WetlandEcologyItem">
					<view class="item">
						<view class="left">极低</view>
						<view class="right">
							<text class="num">{{ WetlandEcology.list[WetlandEcologyIndex]['极低'] }}</text>
							<text class="unit">km²</text>
						</view>
					</view>
					<view class="item">
						<view class="left">低</view>
						<view class="right">
							<text class="num">{{ WetlandEcology.list[WetlandEcologyIndex]['低'] }}</text>
							<text class="unit">km²</text>
						</view>
					</view>
					<view class="item">
						<view class="left">适中</view>
						<view class="right">
							<text class="num">{{ WetlandEcology.list[WetlandEcologyIndex]['适中'] }}</text>
							<text class="unit">km²</text>
						</view>
					</view>
					<view class="item">
						<view class="left">高</view>
						<view class="right">
							<text class="num">{{ WetlandEcology.list[WetlandEcologyIndex]['高'] }}</text>
							<text class="unit">km²</text>
						</view>
					</view>
					<view class="item">
						<view class="left">极高</view>
						<view class="right">
							<text class="num">{{ WetlandEcology.list[WetlandEcologyIndex]['极高'] }}</text>
							<text class="unit">km²</text>
						</view>
					</view>
				</view>
			</view>
		</card2>
	</view>
</template>

<script>
import card2 from '@/components/card/card2.vue';
import scrollBar from '@/components/scroll-bar/scroll-bar2.vue';
import scollBar3 from '@/components/scroll-bar/scroll-bar3.vue';
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
let _self, canvaLineA, canvaLineB;
export default {
	data() {
		return {
			OBJDate: null,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			date: '2021-02-24',
			WetlandOption: null,
			salineAlkaliLand: [],
			array: [],
			WetlandEcologyIndex: 0,
			dataResource: '',
			planData: '',
			vegetationData: '',
			salinizationData: '',
			vegetationChartData: '',
			birdsOptionIndex: 0,
			planName: {
				优: 'excellent',
				良: 'good',
				中: 'in',
				差: 'difference'
			},
			WetlandEcologyDate: {
				总: '',
				极低: '',
				低: '',
				适中: '',
				高: '',
				极高: ''
			},
			axisLabel: {
				interval: 0,
				formatter: function(value) {
					debugger;
					var ret = ''; //拼接加\n返回的类目项
					var maxLength = 1; //每项显示文字个数
					var valLength = value.length; //X轴类目项的文字个数
					var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
					if (rowN > 1) {
						//如果类目项的文字大于3,
						for (var i = 0; i < rowN; i++) {
							var temp = ''; //每次截取的字符串
							var start = i * maxLength; //开始截取的位置
							var end = start + maxLength; //结束截取的位置
							//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
							temp = value.substring(start, end) + '\n';
							ret += temp; //凭借最终的字符串
						}
						return ret;
					} else {
						return value;
					}
				}
			}
		};
	},
	watch: {
		OBJDate: function(eve) {
			this.WetlandOption = {
				name: '湿地盐碱地面积监测',
				color: ['#00A0E9'],
				grid: [{ left: '10%', top: '5%', right: '5%' }],
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					data: eve.sdly.x,
					type: 'category',
					boundaryGap: false,
					axisTick: {
						inside: true
					},
					axisLine: {
						show: false
					},
					axisLabel: this.axisLabel,
					boundaryGap: ['1%', '1%'],
					minInterval: 1,
					max: 'dataMax',
					scale: true
				},
				yAxis: {
					type: 'value',
					min: function(value) {
						return 0;
					},
					max: function(value) {
						return value.max;
					},
					nameTextStyle: {
						padding: [5, 5, 5, 5]
					}
				},
				series: [
					{
						data: eve.sdly.data,
						type: 'bar',
						smooth: true,
						barWidth: 16,
						itemStyle: {
							borderRadius: 50
						}
					}
				]
			};
			this.$nextTick(function() {
				this.$refs.canvasLineA.init(config => {
					const { canvas } = config;
					const chart = echarts.init(canvas, null, config);
					chart.setOption(this.WetlandOption);
					return chart;
				});
			});
			this.salineAlkaliLand = {
				name: '湿地盐碱地面积监测',
				color: ['#F39800'],
				grid: [{ left: '25%', top: '5%', right: '5%' }],
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					data: eve.sdyjhbbh.x,
					type: 'category',
					boundaryGap: false,
					axisTick: {
						inside: true
					},
					axisLine: {
						show: false
					},
					// axisLabel: this.axisLabel,
					boundaryGap: ['1%', '1%'],
					minInterval: 1,
					max: 'dataMax',
					scale: true
				},
				yAxis: {
					type: 'value',
					min: function(value) {
						return 0;
					},
					max: function(value) {
						return value.max;
					},
					nameTextStyle: {
						padding: [5, 5, 5, 5]
					}
				},
				series: [
					{
						data: eve.sdyjhbbh.data,
						type: 'line',
						smooth: true,
						barWidth: 16,
						itemStyle: {
							borderRadius: 50
						}
					}
				]
			};
			this.$nextTick(function() {
				this.$refs.canvasLineB.init(config => {
					const { canvas } = config;
					const chart = echarts.init(canvas, null, config);
					chart.setOption(this.salineAlkaliLand);
					return chart;
				});
			});
		}
	},
	computed: {
		wetland: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = OBJDate.sdlzbfyj;
				}
				return value;
			} catch (e) {
				return null;
			}
		},
		wetlandBiology: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = OBJDate.appSddyx.data;
				}
				return value;
			} catch (e) {
				return null;
			}
		},
		waterQualityTrends: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = OBJDate.appszdtfx;
				}
				return value;
			} catch (e) {
				return null;
			}
		},
		salinizationOfWetland: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = OBJDate.sdyjhjc[0];
				}
				return value;
			} catch (e) {
				return null;
			}
		},
		birdsOption: function({ OBJDate }) {
			console.log(OBJDate);
			let value = null;
			try {
				value = [];
				if (OBJDate != null) {
					for (var i = 0; i < OBJDate.nlhdslfx.option.length; i++) {
						value.splice(i, 0, { name: OBJDate.nlhdslfx.option[i].VALUE });
					}
				}
				return value;
			} catch (e) {
				return null;
			}
		},
		birds: function({ OBJDate, birdsOptionIndex }) {
			console.log(OBJDate);
			let value = null;
			try {
				if (OBJDate != null) {
					let ee = OBJDate.nlhdslfx.option[birdsOptionIndex];
					value = OBJDate.nlhdslfx.data.filter(item => {
						return item.LOCATE == ee.LOCATE && item.VALUE != ee.VALUE;
					});
				}
				return value;
			} catch (e) {
				return null;
			}
		},
		// wetland: function({ OBJDate }) {
		// 	let value = null;
		// 	try {
		// 		if (OBJDate != null) {
		// 			value = OBJDate.sdlzbfyj;
		// 		}
		// 		return value;
		// 	} catch (e) {
		// 		return null;
		// 	}
		// },
		WetlandEcology: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = {};
					value.all = OBJDate.sdstzbfx.zmj;
					value.list = [];
					value.list[0] = OBJDate.sdstzbfx.sdlvz;
					value.list[2] = OBJDate.sdstzbfx.sdtmd;
					value.list[1] = OBJDate.sdstzbfx.sdxfw;
				}
				let list = value.list;
				for (let i = 0; i < list.length; i++) {
					let obj = {};
					for (let j = 0; j < list[i].length; j++) {
						obj[list[i][j].KEY] = list[i][j].VALUE;
					}
					list[i] = obj;
				}
				return value;
			} catch (e) {
				return null;
			}
		}
	},
	components: {
		card2,
		scrollBar,
		scollBar3
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(630);
		this.cHeight = uni.upx2px(370);
		this.getData();
	},
	methods: {
		scrollBarChange(index) {
			console.log(index);
			this.WetlandEcologyIndex = index;
		},
		getData() {
			this.$$.request(
				{
					url: this.config.getedwMessage,
					method: 'GET',
					data: {}
				},
				true,
				true
			)
				.then(res => {
					if (res.code == 2000) {
						console.log(res.data);
						this.OBJDate = res.data;
					}
				})
				.catch(() => {
					console.log('请求失败');
				})
				.finally(() => {
					console.log('complate');
				});
		},
		bindDateChange: function(e) {
			this.date = e.target.value;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/css/asd.scss';
// page {
// 	background: #F4F4F4;
// }

.charts-box {
	.charts-title {
		padding: 30rpx 0 10rpx;
		font-size: 24rpx;

		.title {
			color: #333;
		}

		.unit {
			color: #999;
			.unitT {
				color: #333333;
			}
		}
	}
}

.charts {
	width: 100%;
	height: 370rpx;
	background-color: #ffffff;
}

.page-content {
	// padding: 30rpx;
}

.m-card {
	margin-bottom: 20rpx;
	.m-card-content {
		.img {
			display: block;
			margin: 0 auto;
			width: 200rpx;
			height: 140rpx;
		}
	}

	.p-content {
		position: relative;
		padding: 80rpx 0 125rpx;
		margin: -30rpx 0 -30rpx;

		.img {
			width: 292rpx;
		}

		.items {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.item {
			width: 34%;
			margin-top: 40rpx;

			&:nth-child(even) {
				.title,
				.value {
					padding-left: 60rpx;
				}
			}

			&:nth-child(odd) {
				padding-left: 30rpx;
			}
		}

		.title {
			font-size: 28rpx;
			color: #333;
		}

		.value {
			font-size: 28rpx;
			color: #999;

			text {
				font-size: 36rpx;
				margin-right: 11rpx;
				color: #00a0e9;
			}
		}
	}

	.r-content {
		position: relative;

		.grade {
			position: absolute;
			top: 10rpx;
			left: 50%;
			font-size: 60rpx;
			color: #00dcb0;
			transform: translateX(-50%);
		}

		.flex {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.title {
				font-size: 28rpx;
				color: #333;
			}

			.value {
				font-size: 28rpx;
				color: #00a0e9;
				font-weight: 700;
				text {
					font-size: 30rpx;
				}
			}

			.uni-input::after {
				font-family: iconfont;
				content: '\e659';
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.f-content {
		.items {
			justify-content: space-between;
			margin: 0 -7rpx;
		}

		.item {
			flex: 1;
			margin: 0 7rpx;
			height: 120rpx;
			padding-top: 25rpx;
			text-align: center;
		}

		.title {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #333;
		}

		.value {
			font-size: 28rpx;
			color: #999;
			text {
				font-size: 36rpx;
				color: #00a0e9;
			}
		}
	}

	.v-content {
		.video {
			margin-bottom: 40rpx;
			width: 100%;
			height: auto;
		}

		.title {
			font-size: 28rpx;
			color: #333;
		}

		.tips {
			font-size: 30rpx;
			color: #787c90;
		}

		.title-bar {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;
		}

		.content {
			padding: 20rpx 30rpx;
			background: #f8f8f8;
			border-radius: 6rpx;

			.title {
				margin-bottom: 10rpx;
			}
		}
	}
	.constant-a {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		.item-a {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #f3f9f4;
			box-sizing: border-box;
			padding: 0 0 0 26rpx;
			margin-bottom: 20rpx;
			&:nth-last-child(1) {
				margin-bottom: 0;
			}
			.left {
				min-width: 423rpx;
				width: 423rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				.image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 60rpx;
				}
				.itemIn {
					flex-direction: column;
					align-items: stretch;
					justify-content: space-between;
				}
				.top {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 1;
				}
				.center {
					margin-top: 18rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #32b16c;
					line-height: 1;
				}
			}
			.right {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				.num {
					font-size: 48rpx;
					font-weight: bold;
					color: #00a0e9;
					line-height: 1;
				}
				.unit {
					margin-left: 14rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #00a0e9;
					line-height: 1;
				}
			}
		}
	}
	.content-b {
		.img {
			margin-top: 42rpx;
		}
		.WetlandFontWar {
			margin-top: 19rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 1;
			.valueNUM {
				font-size: 36rpx;
				font-weight: bold;
				color: #00a0e9;
				line-height: 1;
				margin-left: 26rpx;
				margin-right: 6rpx;
			}
			.unit {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				line-height: 1;
			}
		}
	}

	.WetlandEcologyItem {
		margin-top: 52rpx;
		.item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			min-height: 70rpx;
			box-sizing: border-box;
			padding: 0 31rpx 0 36rpx;
			margin-bottom: 20rpx;
			.left {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 1;
			}
			.num {
				font-size: 36rpx;
				font-weight: bold;
				color: #00a0e9;
				line-height: 1;
				margin-right: 22rpx;
			}
			.unit {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				line-height: 1;
			}
			&:nth-child(1) {
				background-color: #f3f9f4;
				.left {
					color: #32b16c;
				}
			}
			&:nth-child(2) {
				background-color: #fefaf3;
				.left {
					color: #f6b37f;
				}
			}
			&:nth-child(3) {
				background-color: #fef5f1;
				.left {
					color: #eb6100;
				}
			}
			&:nth-child(4) {
				background-color: #fdede6;
				.left {
					color: #a84200;
				}
			}
			&:nth-child(5) {
				background-color: #f6e9e5;
				margin-bottom: 0;
				.left {
					color: #a40000;
				}
			}
		}
	}
}
</style>
